<template>
  <div class="my-swiper" :style="{ height: windowHeight + 'px' }">
    <!-- LOGO -->
    <div class="logo_img" v-if="tagVideoShowLogo">
      <img style="width: 100%;" src="https://eduvideo.emacallan.com/imgs/Logo_img.png">
    </div>
    <!-- 静音按钮 -->
    <div class="sound_box" v-if="tagVideoType == 'video'">
      <div class="sound_muted" v-if="isSoundMuted" @click.stop="handleSoundMuted(false)">
        <img style="width: 100%;" src="https://eduvideo.emacallan.com/imgs/icon_muted.png">
      </div>
      <div class="sound_play" v-if="!isSoundMuted" @click.stop="handleSoundMuted(true)">
        <img style="width: 100%;" src="https://eduvideo.emacallan.com/imgs/icon_sound.png">
      </div>
    </div>

    <div v-if="tagVideoType == 'video' && isVideoLoading && !playBtnShow" class="loader"></div>
    <!-- 轮播视频区域 -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in videoLists" :key="index">
          <div v-if="item.isVideo" class="swiper-slide">
            <video class="video_style" :id="'video' + item.index" preload="auto" :poster="item.poster"
              data-setup='{"autoplay": true, "muted": true}' muted autoplay x5-playsinline="true" playsinline="true"
              webkit-playsinline="true" x-webkit-airplay="true" x5-video-orientation="portraint">
              <source :src="item.src" type="video/mp4">
            </video>
            <div class="video_click_btn" @click.stop="handlePlayOrStopVideo(item.index)"></div>
            <div v-if="playBtnShow" class="icon_play_btn">
              <img style="width: 100%;" src="https://eduvideo.emacallan.com/imgs/icon_play.png">
            </div>
            <!-- 视频信息展示区 -->
            <div class="video_info_box">
              <div class="video_title text_font">{{ tagVideoTitle }}</div>
              <!-- 视频进度条 -->
              <div class="video_timebar_box" @touchstart="handleTouchstart" @touchmove="handleTouchmove"
                @touchend="handleTouchend">
                <div :id="'videoTimebar' + index" class="video_timebar_inner">
                  <div class="video_timebar video_timebar_bg"></div>
                  <div class="video_timebar video_timebar_act" v-if="index == videoActiveIndex"
                    :style="{ width: tagVideoCurrentTimeBar }">
                    <div class="video_timebar_act_dot"></div>
                  </div>
                </div>
              </div>
              <!-- 饮酒提示 -->
              <div class="text_tips">
                <img style="width: 100%;" src="https://eduvideo.emacallan.com/imgs/text_tips.png" />
              </div>
              <!-- 拖动视频时间展示 -->
              <div v-if="showVideoBarText" class="video_time_text">
                {{ videoCurrentTime }} / {{ videoTotalTime }}
              </div>
              <!-- 即刻前往按钮 -->
              <div class="now_to_btn" @click.stop="handleChangeGoNowStatus(true)">
                <div class="now_to_btn_text text_font_medium">即刻</div>
                <div class="now_to_btn_text text_font_medium">前往</div>
              </div>
              <div class="icon_bottom_arrow">
                <img style="width: 100%;" src="https://eduvideo.emacallan.com/imgs/icon_bottom_arrow.png" />
              </div>
            </div>
          </div>
          <div v-if="!item.isVideo" class="swiper-slide">
            <div class="slide_img" :style="{ backgroundImage: 'url(' + item.poster + ')' }">
              <div class="slide_QR_box" id="slideQRbox">
                <div class="slide_QR_item" v-for="(item, index) in shopQRImgs" :key="index"
                  :style="{ marginTop: index == 0 ? '0' : '.32rem' }">
                  <div class="slide_QR_item_img" @click.stop="handleLongTapQRImgs(item)">
                    <div class="slide_QR_item_img_box">
                      <img style="width: 100%;" :src="item.qrPicture">
                    </div>

                    <div class="slide_QR_item_text text_font">{{ item.qrText }}</div>
                    <div class="slide_QR_item_text text_font">{{ item.channelName }}</div>
                  </div>
                </div>
                <div class="slide_btn text_font_medium" :style="{ marginTop: qrCodeBtnTop }"
                  @click.stop="handleBackToTop">返回顶部</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 即刻前往弹窗 -->
    <div v-if="showGoNowPop" class="go_now_pop">
      <div class="go_now_pop_top" @click.stop="handleGoNowBox"></div>
      <div class="go_now_pop_bottom">
        <div class="QR_code_box">
          <div @click.stop="handleChangeGoNowStatus(false)" class="icon_right">
            <img style="width: 100%;" src="https://eduvideo.emacallan.com/imgs/icon_right.png">
          </div>

          <div class="icon_shop_box" v-for="(item, index) in shopQRImgs" :key="index"
            :style="{ marginLeft: index == 0 ? '.18rem' : '.28rem' }" @click.stop="handleLongTapQRImgs(item)">
            <img class="icon_shop_img" :src="item.clickBtn">
          </div>
        </div>
        <div class="text_tips_box">
          <img class="text_tips_img" src="https://eduvideo.emacallan.com/imgs/text_tips.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios';
import { nextTick, onMounted, ref, getCurrentInstance } from 'vue';
import Swiper from 'swiper';
import videojs from 'video.js';

// VConsole
// new window.VConsole();

let videoLists = ref([]);   // 视频列表
let videoActiveIndex = ref(0);  // 当前视频索引
let videoSwiper = ref(null);    //  视频swiper实例
let videoPlayer = {};           //  视频播放器实例
let tagVideoAllTime = ref(0);   //  视频总时长
let tagVideoId = "";            //  当前视频id
let tagVideoCurrentTimeBar = ref(0);
let videoTimebar = null;
let videoTotalTime = ref('00:00');
let videoCurrentTime = ref('00:00');
let videoCurrentTimeNum = ref(0);
let showVideoBarText = false;
let tagVideoTitle = ref("");
let tagVideoType = ref("");
let tagVideoShowLogo = ref(false);
let playBtnShow = ref(false);
let isSoundMuted = ref(true); //  是否静音
let showGoNowPop = ref(false); //  是否显示立即前往弹窗

let shopQRImgs = ref([]);
let windowHeight = ref(0);
let qrCodeBtnTop = ref('1.46rem');
let isVideoLoading = ref(true);

let commonSensors = ref();

let jsonData = {
  videoLists: [
    {
      "showLogo": true,
      "isVideo": true,
      "index": 1,
      "src": "https://eduvideo.emacallan.com/video/v5/01-mini.mp4",
      "poster": "https://eduvideo.emacallan.com/video/v5/01-frame.jpg",
      "autoPlay": true,
      "videoTitle": "经典雪莉桶12年",
      "videoDesc": "经典雪莉桶12年"
    },
    {
      "showLogo": true,
      "isVideo": true,
      "index": 2,
      "src": "https://eduvideo.emacallan.com/video/v5/02-mini.mp4",
      "poster": "https://eduvideo.emacallan.com/video/v5/02-frame.jpg",
      "autoPlay": true,
      "videoTitle": "双雪莉桶12年",
      "videoDesc": "双雪莉桶12年"
    },
    {
      "showLogo": true,
      "isVideo": true,
      "index": 3,
      "src": "https://eduvideo.emacallan.com/video/v5/03-mini.mp4",
      "poster": "https://eduvideo.emacallan.com/video/v5/03-frame.jpg",
      "autoPlay": true,
      "videoTitle": "麦卡伦品鉴方式推荐",
      "videoDesc": "麦卡伦品鉴方式推荐"
    },
    {
      "showLogo": true,
      "isVideo": true,
      "index": 4,
      "src": "https://eduvideo.emacallan.com/video/v5/04-mini.mp4",
      "poster": "https://eduvideo.emacallan.com/video/v5/04-frame.jpg",
      "autoPlay": true,
      "videoTitle": "麦卡伦调酒秘籍",
      "videoDesc": "麦卡伦调酒秘籍"
    },
    {
      "showLogo": false,
      "isVideo": false,
      "index": 5,
      "poster": "https://eduvideo.emacallan.com/imgs/image.jpg",
    }
  ],
  shopQRImgs: [
    {
      shopName: "wx",
      clickBtn: "https://eduvideo.emacallan.com/imgs/btn_wx.png",
      QrImg: "https://eduvideo.emacallan.com/imgs/QRcode/wx_v1.png",
      qrText: "扫码前往",
      url: "https://wxaurl.cn/N1ks1jLkAyp",
      channelName: "麦卡伦微信精品店"
    },
    {
      shopName: "tm",
      clickBtn: "https://eduvideo.emacallan.com/imgs/btn_tm.png",
      QrImg: "https://eduvideo.emacallan.com/imgs/QRcode/tm_v1.png",
      qrText: "扫码前往",
      url: "https://equity.tmall.com/tm?agentId=618abb076b514126&bc_fl_src=tmall_market_llb_1_2692523&llbPlatform=_pube&llbOsd=1&di=__IDFA__&dim=__IMEI__&oaid=__OAID__&caid=__CAID__&sy=llb",
      channelName: "麦卡伦天猫旗舰店"
    },
    {
      shopName: "jd",
      clickBtn: "https://eduvideo.emacallan.com/imgs/btn_jd.png",
      QrImg: "https://eduvideo.emacallan.com/imgs/QRcode/jd_v1.jpeg",
      qrText: "扫码前往",
      url: "https://3.cn/10iTXoG-0",
      channelName: "麦卡伦京东旗舰店"
    }
  ]
}

onMounted(async () => {
  commonSensors.value = getCurrentInstance()?.appContext.config.globalProperties.commonSensors;
  //  神策埋点
  handleSensorsTrack("MEVPageView", {
    page_name: "Miniature Education Video",
    current_url: "/"
  });
  await getApiJsonData();
});

//  初始化页面数据
const handlePageInit = async()=>{
  nextTick(() => {
    windowHeight.value = document.documentElement.clientHeight;
  });
  getQRboxDom();
  //  获取视频进度条操作长度
  setTimeout(() => {
    videoTimebar = document.getElementById('videoTimebar0');
  }, 1000)
  // 设置第一个视频信息
  setVideoDetails(0);
  // 初始化轮播
  initSwiper();
}

//  获取视频和二维码配置json数据
const getApiJsonData = async () => {
  const videoCurl = axios.get('/api/api/customer/v1/view/getOneByType/video_BOOT');
  const qrCurl = axios.get('/api/api/customer/v1/view/getOneByType/QR_BOOT');
  Promise.all([videoCurl, qrCurl])
    .then(results => {
      // 视频配置数据
      const _videoData = results[0];
      if (_videoData.status === 200 && _videoData.data && _videoData.data.code == 200 && _videoData.data.data && _videoData.data.data.jsonData) {
        const _jsonData = JSON.parse(_videoData.data.data.jsonData);
        console.log(_jsonData)
        videoLists.value = _jsonData;
      }else{
        console.log('####  视频配置数据请求失败使用本地暂存数据')
        videoLists.value = jsonData.videoLists;
      }
      //  二维码配置json数据
      const _qrData = results[1];
      if (_qrData.status === 200 && _qrData.data && _qrData.data.code == 200 && _qrData.data.data && _qrData.data.data.jsonData) {
        const _jsonData = JSON.parse(_qrData.data.data.jsonData);
        console.log(_jsonData)
        shopQRImgs.value = _jsonData;
      }else{
        console.log('####  二维码配置数据请求失败使用本地暂存数据')
        shopQRImgs.value = jsonData.shopQRImgs;
      }
      handlePageInit();
    })
    .catch(error => {
      console.error('getApiJsonData-requests-failed:', error);
      console.log('####  API配置数据请求失败使用本地暂存数据')
      videoLists.value = jsonData.videoLists;
      shopQRImgs.value = jsonData.shopQRImgs;
      handlePageInit();
    });
}


// 轮播二维码页面底部按钮适配
const getQRboxDom = () => {
  try {
    setTimeout(() => {
      const dom = document.getElementById("slideQRbox");
      const height = dom.offsetHeight + 32;
      if (height > windowHeight.value) {
        const _num = (height - windowHeight.value) / 2;
        qrCodeBtnTop.value = _num < 20 ? '20px' : _num + 'px';
      }
    }, 1500);
  } catch (e) {
    console.log(e);
  }
};

//  轮播初始化
const initSwiper = () => {
  videoSwiper.value = new Swiper('.swiper', {
    direction: 'vertical',
    autoplay: true,
    on: {
      init: function (e) {
        setTimeout(() => {
          initAllVideosObj();
          const firstTag = videoLists.value[0];
          const _id = 'video'+firstTag.index;
          handlePlayVideo(_id);
        }, 100);
      },
      touchStart: function (e) {
        videoActiveIndex.value = e.activeIndex;
      },
      slideChangeTransitionEnd: function (e) {
        videoActiveIndex.value = e.activeIndex;
        setVideoDetails(e.activeIndex);
        const nowTag = videoLists.value[e.activeIndex];
        const _id = 'video'+nowTag.index;
        handlePlayVideo(_id);
      }
    }
  });
};

/**
 * 设置视频标题等信息
 * @param {*} index
 */
const setVideoDetails = (index) => {
  tagVideoTitle.value = videoLists.value[index].videoTitle || "";
  tagVideoType.value = videoLists.value[index].isVideo ? "video" : "img";
  tagVideoShowLogo.value = videoLists.value[index].showLogo;
  // 神策埋点
  handleSensorsTrack("VideoPageView", {
    page_name: "Miniature Education Video",
    current_url: "/",
    module_name: tagVideoType.value == 'video' ? tagVideoTitle.value : "底部跳转",
  });
};

//  静音按钮点击
const handleSoundMuted = (flag) => {
  isSoundMuted.value = flag;
  if (videoPlayer[tagVideoId]) {
    videoPlayer[tagVideoId].muted(flag);
  }
}

//  暂停所有视频
const pauseAllVideos = () => {
  //  先暂停所有视频
  for (const key in videoPlayer) {
    if (Object.prototype.hasOwnProperty.call(videoPlayer, key)) {
      videoPlayer[key].pause();
      videoPlayer[key].off();
    }
  }
}

/**
 * 播放视频
 * @param {*} id 视频id
 */
const handlePlayVideo = (id) => {
  try {
    tagVideoId = id;
    tagVideoCurrentTimeBar.value = 0;

    //  先暂停其他视频
    for (const key in videoPlayer) {
      if (Object.prototype.hasOwnProperty.call(videoPlayer, key) && key != id) {
        videoPlayer[key].pause();
        videoPlayer[key].off();
      }
    }

    const _obj = videoPlayer[id];
    if (!_obj) return;
    _obj.muted(isSoundMuted.value);
    _obj.ready((e) => {
      let promise = _obj.play();
      if (promise !== undefined) {
        promise.then(function () {
          playBtnShow.value = false;
          console.log("播放成功", id);
        }).catch(function (error) {
          console.log("播放出错，设置静音后再次尝试播放", error);
          playBtnShow.value = true;
        });
      }
      tagVideoAllTime.value = _obj.duration();
      videoTotalTime.value = secondsToHms(tagVideoAllTime.value);
    });
    _obj.on('loadedmetadata', function (e) {
      let promise = _obj.play();
      if (promise !== undefined) {
        promise.then(function () {
          isVideoLoading.value = false;
          playBtnShow.value = false;
          console.log("播放成功", id);
        }).catch(function (error) {
          console.log("播放出错，设置静音后再次尝试播放", error);
          playBtnShow.value = true;
        });
      }
      tagVideoAllTime.value = _obj.duration();
      videoTotalTime.value = secondsToHms(tagVideoAllTime.value);
    });

    // 视频播放结束监听
    _obj.one('ended', () => {
      if (videoActiveIndex.value < videoLists.value.length - 1) {
        videoSwiper.value.slideNext();
      }
      // 神策埋点
      handleSensorsTrack("PlayEnd", {
        video_id: id,
        video_title: tagVideoTitle.value,
        play_duration: tagVideoAllTime.value,
        play_progress: 1
      });
    })
    _obj.on('pause', function (e) {
      playBtnShow.value = true;
    });
    // 视频播放进度监听
    _obj.on('timeupdate', function (e) {
      playBtnShow.value = false;
      const currentTime = _obj.currentTime();
      const percent = (currentTime / tagVideoAllTime.value) * 100;
      tagVideoCurrentTimeBar.value = percent >= 100 ? '100%' : `${percent}%`;
    });

    // 显示 loading 指示器
    _obj.on('waiting', () => {
      console.log('Loading...');
      isVideoLoading.value = true;
    });

    // 隐藏 loading 指示器
    _obj.on(['canplay', 'canplaythrough'], () => {
      console.log('Ready to play');
      isVideoLoading.value = false;
    });
  } catch (e) {
    playBtnShow.value = true;
    console.log("handlePlayVideo-播放失败", e)
  }
}

/**
 * 初始化所有视频对象
 */
const initAllVideosObj = () => {
  videoLists.value.forEach((item, index) => {
    if (item.isVideo) {
      const _idstr = "video" + item.index;
      videoPlayer[_idstr] = videojs(_idstr, {
        autoplay: false,
        controls: false,
        muted: true,
        preload: 'auto',
        sources: [{
          src: item.src,
          type: 'video/mp4'
        }]
      });
      // videoPlayer[_idstr].ready(function () {
      //   if (index != 0) {
      //     videoPlayer[_idstr].pause();
      //     videoPlayer[_idstr].currentTime(0);
      //   }
      // });
    }
  });
}

//  返回顶部
const handleBackToTop = () => {
  if (videoSwiper.value) {
    pauseAllVideos();
    videoSwiper.value.slideTo(0);
  }
}

//  播放或暂停视频
const handlePlayOrStopVideo = (id) => {
  const _idstr = 'video' + id;
  if (id && videoPlayer[_idstr]) {
    const _video = videoPlayer[_idstr];
    if (playBtnShow.value) {
      _video.play();
    } else {
      _video.pause();
      // 神策埋点
      handleVideoPlayEndTrack(_video, _idstr)
    }
  }
}

//  即刻前往弹窗 展示 关闭
const handleChangeGoNowStatus = (flag) => {
  showGoNowPop.value = flag;
  if (flag) {
    //  暂停视频
    if (tagVideoId && videoPlayer[tagVideoId] && !playBtnShow.value) {
      const _video = videoPlayer[tagVideoId];
      _video.pause();
      // 神策埋点
      handleVideoPlayEndTrack(_video, tagVideoId)
    }
  } else {
    //  播放视频视频
    if (tagVideoId && videoPlayer[tagVideoId] && playBtnShow.value) {
      const _video = videoPlayer[tagVideoId];
      _video.play();
    }
  }
}
// 阻止默认行为
const handleGoNowBox = (e) => {
  e.preventDefault(); // 防止默认行为，例如页面滚动
  showGoNowPop.value = false;
  //  播放视频视频
  if (tagVideoId && videoPlayer[tagVideoId]) {
    const _video = videoPlayer[tagVideoId];
    _video.play();
  }
}

//  视频播放 暂停或继续播放埋点
const handleVideoPlayEndTrack = (_video, id) => {
  // 神策埋点
  const currentTime = _video.currentTime();
  const percent = (currentTime / tagVideoAllTime.value);
  handleSensorsTrack("PlayEnd", {
    video_id: id,
    video_title: tagVideoTitle.value,
    play_duration: currentTime,
    play_progress: parseFloat(percent.toFixed(2))
  });
}

//  长按二维码图片
const handleLongTapQRImgs = (item) => {
  if (item.url) {
    window.open(item.url);
    //  神策埋点
    handleSensorsTrack("ClickToJump", {
      jump_to: item.channelName || "",
      module_name: tagVideoType.value == 'video' ? tagVideoTitle.value : "底部跳转",
    })
  }
}

// 拖动进度条功能
let isDragging = false;
const handleTouchstart = (event) => {
  event.preventDefault(); // 防止默认行为，例如页面滚动
  isDragging = true;
  showVideoBarText = true;
  setVideoProgress(event.touches[0]);
}
const handleTouchmove = (event) => {
  if (!isDragging) return;
  event.preventDefault(); // 防止默认行为，例如页面滚动
  setVideoProgress(event.touches[0]);
}
const handleTouchend = (e) => {
  isDragging = false;
  showVideoBarText = false;
  if (videoTimebar && tagVideoId && videoPlayer[tagVideoId]) {
    const _video = videoPlayer[tagVideoId];
    _video.currentTime(videoCurrentTimeNum.value);
  }
}


// 设置视频播放位置到指定的时间点
const setVideoProgress = (event) => {
  if (videoTimebar && tagVideoId && videoPlayer[tagVideoId]) {
    const _video = videoPlayer[tagVideoId];
    const allTime = _video.duration();
    const rect = videoTimebar.getBoundingClientRect();
    const offset = event.clientX - rect.left;
    let percent = offset / rect.width;
    if (event.clientX >= rect.right) {
      percent = 1;
    } else if (event.clientX <= rect.left) {
      percent = 0;
    }
    // 计算当前需要播放的时间
    const currentPlayTime = allTime * percent;
    videoCurrentTime.value = secondsToHms(currentPlayTime);
    videoCurrentTimeNum.value = currentPlayTime;
  }
}

/**
 * 秒转时分秒
 * @param {*} seconds 
 */
const secondsToHms = (seconds) => {
  const pad = (num) => String(num).padStart(2, '0');
  // const h = Math.floor(seconds / 3600);
  const m = Math.floor((seconds % 3600) / 60);
  const s = Math.floor(seconds % 60);

  return [m, s]
    .filter(n => n || n === 0) // 确保小时为0时也显示
    .map(pad)
    .join(':')
    .replace(/^0(\d)/, '$1'); // 移除最前面多余的0
}

// 神策埋点方法
const handleSensorsTrack = (eventName, params) => {
  try {
    if (commonSensors.value) {
      commonSensors.value.track(eventName, params);
    }
  } catch (e) { }
}
</script>

<style>
@font-face {
  font-family: NotoSansSCMedium;
  src: url('../assets/font/NotoSansSC-Medium.ttf');
}

@font-face {
  font-family: NotoSansSCRegular;
  src: url('../assets/font/NotoSansSC-Regular.ttf');
}

@font-face {
  font-family: FrankNewMedium;
  src: url('../assets/font/FrankNew-Medium.otf');
}

@font-face {
  font-family: FrankNewRegular;
  src: url('../assets/font/FrankNew-Regular.otf');
}

.text_font {
  font-family: FrankNewRegular, NotoSansSCRegular;
}

.text_font_medium {
  font-family: FrankNewMedium, NotoSansSCMedium;
}

/* 你可以在这里添加你的自定义样式 */
.my-swiper {
  width: 7.5rem;
  height: 100vh;
  overflow: hidden;
}

.swiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.swiper-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.swiper-slide {
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  overflow: hidden;
}

.video_style {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video_info_box {
  width: 6.54rem;
  position: absolute;
  left: .48rem;
  bottom: .35rem;
  z-index: 1999;
}

.video_title {
  font-size: .28rem;
  font-weight: 500;
  line-height: .48rem;
  color: #fff;
}

.video_timebar_box {
  padding: .16rem 0;
  box-sizing: content-box;
}

.video_timebar_inner {
  width: 6.54rem;
  height: .12rem;
  overflow: hidden;
  position: relative;
}

.video_timebar {
  height: .04rem;
  position: absolute;
  left: 0;
  top: .04rem;
  border-radius: 4px 0px 0px 4px;
}

.video_timebar_bg {
  width: 100%;
  background: rgba(255, 255, 255, 0.54);
  z-index: 18;
}

.video_timebar_act {
  width: 0;
  background: #fff;
  z-index: 19;
  transition: all 100ms ease-in-out;
}

.video_timebar_act_dot {
  width: 0.08rem;
  height: 0.08rem;
  position: absolute;
  right: 0;
  top: -.02rem;
  border-radius: 100%;
  background-color: #fff;
  z-index: 199;
  transition: all 100ms ease-in-out;
}

.video_time_text {
  position: absolute;
  left: 0;
  top: -0.56rem;
  font-size: .2rem;
  color: #fff;
  text-align: center;
  z-index: 199;
  width: 100%;
  font-family: FrankNewRegular;
}

.text_tips {
  width: 6.32rem;
  height: .21rem;
  font-size: 0;
  margin: 0 auto;
}

.now_to_btn {
  width: .96rem;
  height: .96rem;
  border-radius: 100%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
  position: absolute;
  right: 0;
  top: -0.38rem;
  z-index: 1999;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
}

.now_to_btn_text {
  width: 100%;
  font-size: .24rem;
  font-weight: 500;
  line-height: .32rem;
  color: #000;
  text-align: center;
}

.video_click_btn {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 299;
}

.icon_play_btn {
  width: 1.28rem;
  height: 1.28rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -.64rem;
  margin-top: -.64rem;
  z-index: 199;
}

.logo_img {
  width: 2.56rem;
  height: .56rem;
  position: absolute;
  left: 50%;
  margin-left: -1.28rem;
  top: .36rem;
  z-index: 199;
  font-size: 0;
}

.sound_box {
  width: .48rem;
  height: .48rem;
  position: absolute;
  right: .24rem;
  top: .48rem;
  z-index: 1999;
}

.sound_muted,
.sound_play {
  width: 100%;
  height: 100%;
  font-size: 0;
}

.go_now_pop {
  width: 7.5rem;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 99999;
}

.go_now_pop_top {
  width: 100%;
  height: 100%;
  background-color: transparent;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 199;
}

.go_now_pop_bottom {
  width: 100%;
  height: 2.98rem;
  background-color: rgba(0, 0, 0, 0.85);
  position: absolute;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  padding-top: .32rem;
  z-index: 299;
}

.QR_code_box {
  width: 100%;
  height: 1.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-left: .4rem;
  box-sizing: border-box;
}

.icon_right {
  width: .48rem;
  height: .48rem;
  margin-top: .51rem;
  font-size: 0;
}

.icon_shop_box {
  width: 1.8rem;
  height: 1.5rem;
  font-size: 0;
}

.icon_shop_img {
  width: 1.8rem;
  height: 1.5rem;
  margin-bottom: .16rem;
}

.icon_shop_text {
  width: 100%;
  font-size: .2rem;
  font-weight: normal;
  line-height: .28rem;
  text-align: center;
  color: #fff;
}

.text_tips_box {
  width: 100%;
  height: .72rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: .32rem;
}

.text_tips_img {
  width: 6.32rem;
  height: .21rem;
}

.vjs-loading-spinner,
.vjs-big-play-button,
.vjs-control-bar {
  display: none !important;
}

.slide_img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

.slide_btn {
  width: 6.54rem;
  height: .8rem;
  border-radius: .48rem .16rem .48rem .48rem;
  box-sizing: border-box;
  border: 2px solid #FFFFFF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .28rem;
  font-weight: 500;
  margin-top: 1.46rem;
}

.slide_QR_box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  left: 0;
  bottom: .64rem;
}

.slide_QR_item {
  width: 2.4rem;
  height: 3.2rem;
}

.slide_QR_item_img {
  width: 2.4rem;
  height: 3.2rem;
}

.slide_QR_item_img_box {
  width: 2.4rem;
  height: 2.4rem;
  box-sizing: border-box;
  padding: 0.2rem;

}

.slide_QR_item_text {
  width: 100%;
  text-align: center;
  font-size: .24rem;
  font-weight: normal;
  line-height: .4rem;
  color: #fff;
}

/* 定义 loading 动画的样式 */
.loader {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #000000;
  border-radius: 50%;
  width: .8rem;
  height: .8rem;
  animation: spin 2s linear infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -.4rem;
  margin-top: -.4rem;
  z-index: 198;
  box-sizing: border-box;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.icon_bottom_arrow {
  width: 2rem;
  height: .32rem;
  font-size: 0;
  margin: .12rem auto 0 auto;
  animation: float 2.5s ease-in-out infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(5px);
  }
}
</style>